<template>
  <div class="content_panel project_modules">
    <div class="content_panel_top">
      <h3 class="panel_title">
        <span>{{$t('pageTitle.waitAssign')}}</span>
      </h3>

      <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
        <el-row>
          <el-col :span="5">
            <el-form-item label="" prop="orderNid"><!--内部订单号-->
              <el-input :placeholder="$t('common.innerOrderId')" v-model="form.orderNid" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="" prop="phone"><!--手机号-->
              <el-input :placeholder="$t('common.mobileNumber')" v-model="form.phone" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="" prop="cardId"><!--身份证号-->
              <el-input :placeholder="$t('common.identityNumber')" v-model="form.cardId" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="checkTime" ><!--进件时间-->
              <el-date-picker
                      v-model="form.checkTime"
                      style="width: 100%"
                      align="right"
                      type="datetimerange"
                      :editable="false"
                      range-separator="-"
                      :start-placeholder="$t('common.incomeStartTime')"
                      :end-placeholder="$t('common.incomeEndTime')"></el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="" prop="borrowTime" ><!--申请时间-->
              <el-date-picker
                      v-model="form.borrowTime"
                      style="width: 100%"
                      align="right"
                      type="datetimerange"
                      :editable="false"
                      range-separator="-"
                      :start-placeholder="$t('common.applyStartTime')"
                      :end-placeholder="$t('common.applyEndTime')"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="userType" label=""> <!--用户类型-->
              <el-select v-model="form.userType" clearable :placeholder="$t('common.userType')" style="width: 100%;" >
                <el-option key="0" value="0" :label="$t('common.newUser')"></el-option> <!--新户-->
                <el-option key="1" value="1" :label="$t('common.secNewUser')"></el-option> <!--次新户-->
                <el-option key="2" value="2" :label="$t('common.oldUser')"></el-option> <!--老户-->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button @click="search" type="primary">{{$t('common.search')}}</el-button>
            <el-button @click="clear" type="primary">{{$t('common.clear')}}</el-button>
            <el-button @click="exportData" type="primary">{{$t('common.export')}}</el-button>
          </el-col>
        </el-row>


      </el-form>
    </div>
    <!--待分派-->
    <div class="module_content">
      <div class="content_panel project_modules">
        <div class="table_list">
          <el-table :max-height="tableMaxHeight" :data="tableData" style="width: 100%;" @selection-change="selectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="userName" :label="$t('common.name')" min-width="110"></el-table-column>
            <el-table-column prop="userId" label="User ID" min-width="80"></el-table-column>
            <el-table-column prop="cardId" :label="$t('common.identityNumber')" min-width="150">
              <template slot-scope="scope">
                <a @click="goDetail(scope.row)" type="text" size="small" v-if="scope.row.cardId" href="javascript:void(0);">{{ scope.row.cardId }}</a>
              </template>
            </el-table-column>
            <el-table-column prop="phone" :label="$t('common.mobileNumber')" min-width="130"></el-table-column>
            <el-table-column prop="userType" :label="$t('common.userType')" min-width="100">
              <template slot-scope="scope"><span :class=" scope.row.userType==2 ? 'txt_red' :''"> {{ scope.row.userType | switchUserType }} </span> </template>
            </el-table-column>
            <el-table-column prop="orderNid" :label="$t('common.innerOrderId')" width="200">内部订单号</el-table-column>
            <el-table-column prop="borrowTime" :label="$t('common.applyDate')" min-width="160">
              <template slot-scope="scope">{{ scope.row.borrowTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
            </el-table-column>
            <el-table-column prop="checkTime" :label="$t('tel.incomingTime')" min-width="160">
              <template slot-scope="scope">{{ scope.row.checkTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
            </el-table-column>
          </el-table>
        </div>
        <div class="bottom-wrap">
          <el-button @click="assignOrder" :disabled="selectedList.length === 0" type="primary" size="small" class="recheck_batch">{{ $t('tel.handAssignOrder') }}</el-button>
          <pagination @pageChange="pageChange" :page="page">分页组件</pagination>
        </div>
        <!--手动分单弹框-->
        <el-dialog :title="$t('tel.handAssignOrder')" :visible.sync="assignOrderShow" width="600px">
          <div class="number-border">
            <span>{{$t('tel.number')}}:</span><span class="number-right">{{selectionLength}}</span>
          </div>
          <el-form :model="groupForm" label-position="top">
            <el-form-item>
              <el-checkbox-group v-model="groupForm.uiList">
                <el-row>
                  <el-col v-for="item in staffList" :key="item.id" :span="8">
                    <el-checkbox :label="item.userId">{{ item.userName }}</el-checkbox>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitAssignOrder" :disabled="groupForm.uiList.length === 0 || groupForm.uiList.length > selectionLength">{{$t('collection.submit')}}</el-button>
              <el-button type="default" @click="cancel">{{$t('collection.cancel')}}</el-button>
            </div>
        </el-dialog>
        <!--分单成功弹框-->
        <el-dialog :visible.sync="assignSucc" width="400px">
          <div class="assignTips">
            <span class="orderSucc">{{$t('tel.totalOrder')}}&nbsp;{{ orderNum }}, {{$t('tel.leftOrder')}}&nbsp;{{ orderRemain }}</span>
          </div>
        </el-dialog>

      </div>
    </div>
  </div>
</template>

<script>
  import mixin from '@/service/mixin';
  import Pagination from '@/components/pagination';
  import { apiConf } from '@/config/';
  import urlType from '@/api/url-type';
  import urlUtils from '@/libs/urlutils';
  import storage from '@/libs/storage';
  import AlertDialog from '@/components/alert-dialog';

  let that = null;
  export default {
    name: 'telUnassign',
    components: {
      Pagination,
      AlertDialog
    },
    mixins: [mixin],
    data() {
      return {
        user: storage.get('user'),
        form: {
          orderNid: '',
          phone: '',
          cardId: '',
          userType: '',
          borrowTime: '',
          borrowTimeStart: '',
          borrowTimeEnd: '',
          checkTime: '',
          checkTimeStart: '',
          checkTimeEnd: '',
        },
        groupForm: {
          uiList: [],
        },
        selectedList: [],
        assignOrderShow: false,
        assignSucc: false, // 分单成功提示框
        selectionLength: '',
        telVeriStaff: [],
        staffList: [],
        orderNum: '',
        orderRemain: '',
        rules: {
          orderNid: [],
          phone: [],
          cardId: [],
          operPeopleName: [],
          userType: [],
          reason: [],
          team: [],
          borrowTime: [],
          checkTime: [],
          assignTime: [],
          lastVerifyTime: [],
        }
      };
    },
    computed: {
      // showSearch() {
      //   return this.$store.state.app.search.show;
      // }
    },
    methods: {
      getTableData(page = this.page, opts = this.form) {
        const params = {
          type: 0,
          orderNid: '',
          phone: '',
          cardId: '',
          userType: '',
          borrowTime: '',
          borrowTimeStart: '',
          borrowTimeEnd: '',
          checkTime: '',
          checkTimeStart: '',
          checkTimeEnd: '',
          page: {
            pageNo: page.currentPage,
            pageSize: this.page.pageSize
          },
          language: storage.getLocal('language'),
        };
        const form = this.form;
        if (typeof form.userType !== 'undefined') {
          params.userType = form.userType;
        }
        if (opts) {
          Object.keys(params).forEach((key) => {
            if (opts[key]) {
              if (typeof opts[key] === 'string') {
                opts[key] = opts[key].trim();
              }
              params[key] = opts[key];
            }
          });
          const day = 0;
          if (opts.borrowTime instanceof Array && opts.borrowTime.length === 2) {
            params.borrowTimeStart = opts.borrowTime[0].getTime();
            params.borrowTimeEnd = opts.borrowTime[1].getTime() + day;
            params.borrowTime = null;
          }
          if (opts.checkTime instanceof Array && opts.checkTime.length === 2) {
            params.checkTimeStart = opts.checkTime[0].getTime();
            params.checkTimeEnd = opts.checkTime[1].getTime() + day;
            params.checkTime = null;
          }
        }
        this.$api.tel.queryCheckOrder(params).then((res) => {
          const { status, data, error } = res;
          if (status === '1' && error === '00000000') {
            this.tableData = data.data || [];
            this.page.recordsTotal = data.pageCount;
            if (this.$refs.form) {
              this.$refs.form.clearValidate();
            }
            this.tableMaxHeight = window.document.body.clientHeight - 330;
          }
        });
      },
      search() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.getTableData({ currentPage: 1 }, this.form);
          } else {
            this.$message.error(this.$t('p2p.plsCheckFilter'));
          }
        });
      },
      // 获取要分配订单的电核人员列表
      getAllUserInfo() {
        const params = {
          roleId: 1,
          userName: '',
          leaderId: '',
          loginId: this.user.id,
        };
        this.$api.tel.getAllUserInfo(params).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && '00000000' === error) {
            this.staffList = data.data;
          }
        });
      },
      // 弹出手动分单弹框
      assignOrder() {
        this.assignOrderShow = true;
      },
      // 提交手动分单
      submitAssignOrder() {
        const params = {
          uiList: this.groupForm.uiList.map(v => {return {userId: v}}),
          cobList: this.cobList.map(v => {return {orderNid: v}}),
        };
        this.$api.tel.assign(params).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && '00000000' === error) {
            this.assignOrderShow = false;
            this.orderRemain = data.orderRemain;
            this.orderNum = data.orderNum;
            this.assignSucc = true;
            this.getTableData();
          } else {
            this.assignOrderShow = false;
            this.assignSucc = false;
            this.getTableData();
          }
        });
      },
      selectionChange(val) {
        this.selectedList = val;
        this.selectionLength = this.selectedList.length;
        this.cobList = [];
        this.selectedList.forEach((item) => {
          this.cobList.push(item.orderNid);
        });
      },
      cancel() {
        this.assignOrderShow = false;
        this.groupForm.uiList = [];
      },
      clear() {
        this.form = {
          orderNid: '',
          phone: '',
          cardId: '',
          userType: '',
          borrowTimeStart: '',
          borrowTimeEnd: '',
          checkTimeStart: '',
          checkTimeEnd: '',
        };
      },
      // excel 导出
      exportData() {
        const params = {
          type: 0,
          orderNid: '',
          phone: '',
          cardId: '',
          userType: '',
          borrowTime: '',
          borrowTimeStart: '',
          borrowTimeEnd: '',
          checkTime: '',
          checkTimeStart: '',
          checkTimeEnd: '',
        };
        let isNull = true;
        const form = this.form;
        const opts = this.form;
        Object.keys(params).forEach((key) => {
          if (form[key]) {
            params[key] = form[key];
            isNull = false;
          }
        });
        const day = 0;
        if (opts.borrowTime instanceof Array && opts.borrowTime.length === 2) {
          params.borrowTimeStart = opts.borrowTime[0].getTime();
          params.borrowTimeEnd = opts.borrowTime[1].getTime() + day;
          params.borrowTime = null;
        }
        if (opts.checkTime instanceof Array && opts.checkTime.length === 2) {
          params.checkTimeStart = opts.checkTime[0].getTime();
          params.checkTimeEnd = opts.checkTime[1].getTime() + day;
          params.checkTime = null;
        }
        if (isNull) {
          this.$message.error(this.$t('tel.searchInfo'));
          return;
        }
        const user = storage.get('user');
        const language = storage.getLocal('language');
        params.token = user.token;
        params.language = language;
        let url = apiConf.baseUrl + urlType.tel.getCheckOrder;
        url = urlUtils.fillParams(params, url, []);
        console.log(urlUtils.fillParams(params, url, []));
        window.open(url);
      },
      goDetail(row) {
        this.$openNewBlank(`#/conf/tel-detail/${row.userId}/${this.$root.local}/${row.orderNid}/${row.checkStatus}/${row.operPeopleId}/${row.userType}`);
      },
    },
    filters: {
      // 用户类型
      switchUserType(type) {
        switch (+type) {
          case 0:
            return that.$t('common.newUser');
          case 1:
            return that.$t('common.secNewUser');
          case 2:
            return that.$t('common.oldUser');
          default:
            return '';
        }
      },
    },
    created() {
      that = this;
      this.getTableData({ currentPage: this.page.currentPage });
      this.getAllUserInfo();
    },
  };
</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
  [data-page=tel-unassign]{
    .timeWidth {
      display: inline-block;
      width: 620px;
    }
    .el-tooltip__popper{
      max-width: 300px;
      word-break: break-all;
      background-color: #fff;
      box-shadow: 0px 0px 5px #ccc;
      color: #000;
    }
    .el-date-editor .el-range-separator {
      width: 35px;
    }
    .searchButton {
      padding-top: 25px;
    }
    .el-col {
      padding-left: 10px;
    }
    .bottom-wrap{
      width: 100%;display: flex;justify-content: space-between;align-items: center;
    }
  }
</style>
